<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">财务打款明细</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true">
                    <!-- <el-form-item>
                    <el-date-picker v-model="startValue" :clearable='clearable' value-format='yyyy-MM-dd' size='small' type="date" placeholder="开始日期" style="width:150px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>至</el-form-item>
                <el-form-item>
                    <el-date-picker v-model="endValue" :clearable='clearable' value-format='yyyy-MM-dd' size='small' type="date" placeholder="结束日期" style="width:150px;">
                    </el-date-picker>
                </el-form-item> -->
                    <el-form-item>
                        <el-date-picker v-model="dataValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd' size='small'/>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="small" v-model.trim="bankFlowNumber" placeholder="流水号" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click='onSubmit'>搜索</el-button>
                    </el-form-item>
                    <!-- <el-form-item label="打款余额:" class="ml-10">
                    {{yue}}
                </el-form-item> -->
                    <el-form-item class="ml-10">
                        <el-button type="primary" size="small" @click='addForm'>新增</el-button>
                    </el-form-item>
                </el-form>

                <!-- 数据列表 -->
                <el-table border :data="tableData" v-loading="ListLoading" element-loading-text="拼命加载中">
                    <el-table-column property="paymentTime" label="打款时间"/>
                    <el-table-column property="bankFlowNumber" label="银行流水号"/>
                    <el-table-column property="paymentAmount" label="打款金额"/>
                    <el-table-column property="paymentCompany" label="打款公司"/>
                    <el-table-column property="remarks" label="备注"/>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <span class="tableBtn" @click="editForm(scope.row)">修改</span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>

                <el-dialog :title="dialogTitle" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="40%" @close="closeDailog" @open="openDailog">
                    <el-form>
                        <el-form-item label="打款时间" :label-width="formLabelWidth">
                            <el-date-picker v-model="dailogFrom.paymentTime" type="datetime" value-format='yyyy-MM-dd HH:mm:ss' placeholder="选择日期时间" style="width:250px;"/>
                        </el-form-item>
                        <el-form-item label="银行流水号" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.bankFlowNumber" style="width:250px;"/>
                        </el-form-item>
                        <el-form-item label="打款金额" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.paymentAmount" style="width:250px;"/>
                        </el-form-item>
                        <el-form-item label="打款公司" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.paymentCompany" style="width:250px;"/>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.remarks" style="width:250px;"/>
                        </el-form-item>
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="dailogFrom.status" style="width:150px;" placeholder="请选择状态">
                                <el-option label="成功" value='1'/>
                                <el-option label="失败" value='2'/>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import {
    getFinancialPaymentDetailsList,
    addFinancialPaymentDetails,
    updateFinancialPaymentDetails
} from "../../api/api";
export default {
    data() {
        return {
            ListLoading: false,
            startValue: "",
            endValue: "",
            clearable: false,

            dataValue: "",

            bankFlowNumber: "",

            tableData: [],
            currentPage: 1, // 当前页数
            pageCount: 1, // 总条数

            dailogType: "",
            closeOnClickModal: false,

            dialogTitle: "",
            dialogFormVisible: false,
            formLabelWidth: "120px",

            dailogFrom: {
                paymentTime: "", // 打款时间
                bankFlowNumber: "", // 银行流水号
                paymentAmount: "", // 打款金额
                paymentCompany: "", // 打款公司
                remarks: "", // 备注
                status: "" // 状态
            }
        };
    },
    methods: {
        // 查询
        onSubmit() {
            this.startValue = "";
            this.endValue = "";
            if (this.dataValue) {
                this.startValue = this.dataValue[0];
                this.endValue = this.dataValue[1];
            }
            this.currentPage = 1; // 将页码置为第一页
            this.financialPaymentDetailsList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            this.financialPaymentDetailsList();
        },
        // 获取财务打款明细
        financialPaymentDetailsList() {
            this.ListLoading = true;
            getFinancialPaymentDetailsList({
                pageNum: this.currentPage,
                paymentTimeStart: this.startValue,
                paymentTimeEnd: this.endValue,
                bankFlowNumber: this.bankFlowNumber,
                pageSize: 10
            }).then(res => {
                this.ListLoading = false;
                this.tableData = res.data.list;
                this.pageCount = res.data.pages;
            });
        },
        // 添加财务打款明细
        addFinancialPayment() {
            addFinancialPaymentDetails(this.dailogFrom).then(res => {
                this.ListLoading = false;
                this.$message.success("添加成功!");
                this.financialPaymentDetailsList();
                this.dialogFormVisible = false;
            });
        },
        // 更新财务打款明细
        updateFinancialPayment() {
            updateFinancialPaymentDetails(this.dailogFrom).then(res => {
                this.ListLoading = false;
                this.$message.success("更新成功!");
                this.financialPaymentDetailsList();
                this.dialogFormVisible = false;
            });
        },
        // 新增弹窗
        addForm() {
            this.dailogType = "add";
            this.dialogFormVisible = true;
        },
        // 编辑弹窗
        editForm(rowData) {
            this.dailogType = "edit";
            for (const key in rowData) {
                this.dailogFrom[key] = rowData[key];
                // 状态字段 置为字符串
                if (key === "status") {
                    this.dailogFrom.status = rowData[key].toString();
                }
            }
            this.dialogFormVisible = true;
        },
        // 保存/修改按钮
        confirm() {
            if (!this.dailogFrom.paymentTime) {
                this.$message.error("请输入打款时间!");
                return false;
            }
            if (!this.dailogFrom.bankFlowNumber) {
                this.$message.error("请输入银行流水号!");
                return false;
            }
            // if (!/^[0-9]+$/.test(this.dailogFrom.paymentAmount) || !this.dailogFrom.paymentAmount) {
            //     this.$message.error("请输入正确格式打款金额!");
            //     return false;
            // }
            if (
                isNaN(this.dailogFrom.paymentAmount) ||
                !this.dailogFrom.paymentAmount
            ) {
                this.$message.error("请输入正确格式打款金额!");
                return false;
            }
            if (!this.dailogFrom.paymentCompany) {
                this.$message.error("请输入打款公司!");
                return false;
            }
            if (!this.dailogFrom.remarks) {
                this.$message.error("请输入备注!");
                return false;
            }
            if (!this.dailogFrom.status) {
                this.$message.error("请选择状态!");
                return false;
            }
            if (this.dailogType === "add") {
                this.addFinancialPayment();
            } else if (this.dailogType === "edit") {
                this.updateFinancialPayment();
            }
        },
        // 弹窗打开
        openDailog() {
            this.dailogType === "add"
                ? (this.dialogTitle = "新增")
                : (this.dialogTitle = "编辑");
        },
        // 弹窗关闭
        closeDailog() {
            this.dailogFrom = {
                paymentTime: "", // 打款时间
                bankFlowNumber: "", // 银行流水号
                paymentAmount: "", // 打款金额
                paymentCompany: "", // 打款公司
                remarks: "", // 备注
                status: "" // 状态
            };
        }
    },
    mounted() {
        // 获取财务打款明细
        this.financialPaymentDetailsList();
    }
};
</script>

<style>
</style>
